<template>
  <div>
    <div id="riskBarChart" style="width: 100%;height:300px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getRecentHazardReports} from "@/api/index"

export default {
  name: 'RiskPieChart',
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      getRecentHazardReports().then(res => {
        const chartDom = document.getElementById('riskBarChart')
        let myChart = echarts.init(chartDom)
        this.myChart = myChart
        let option
        option = {
          title: {
            text: '近七天申报隐患数据',
            left: 'center'
          },
          toolbox: {
            show: true,
            feature: {
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          xAxis: {
            type: 'category',
            data: res.data.nameList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: res.data.valueList,
              type: 'bar'
            }
          ]
        };
        window.addEventListener('resize', this.resize)
        myChart.setOption(option)
      })
    })
  },
  methods: {
    resize() {
      this.myChart.resize()
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  }
}
</script>
